<template>
  <h1>{{person}}</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{job.j.sa}}k</h2>
  <button @click="name+='qwe'">增长姓名</button><hr>
  <button @click="age+=1">增长年龄</button><hr>
  <button @click="job.j.sa++">涨薪</button>
</template>

<script>
    import {reactive, ref,toRef,toRefs,watch} from 'vue'
    export default {
        name: "Demo",
        setup(){
            let person =reactive({
                name:'张三',
                age:18,
                job:{
                    j:{
                        sa:20
                    }
                }
            })

            const x = toRefs(person)
            console.log(person)

            //返回一个对象
            return {
                // name:toRef(person,'name'),
                // age:toRef(person,'age'),
                // sa:toRef(person.job.j,'sa'),
                person,
                ...toRefs(person)
            }
        }
    }
</script>